<template>
  <div>
    <el-container class="main-el-contarner">
      <el-main>
        <div class="kanbao-bigbox">
          <div class="righttop-search-box">
            <el-form
              :inline="true"
              :model="param"
              label-width="100px"
              @submit.native.prevent
            >
              <!-- <el-form-item label="事件等级：" label-width="90px">
                  <el-select v-model="param.warnStatus" placeholder="事件等级" size="small" style="width:150px;">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                  </el-select>
              </el-form-item> -->
              <el-form-item label="" label-width="10px">
                <el-input
                  placeholder="请输入监听设备对象关键字检索"
                  clearable
                  v-model="param.name"
                  size="small"
                  style="width: 350px"
                  @keyup.enter.native="onSearch"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch">查找</el-button>
              </el-form-item>

              <!-- <el-form-item style="float: right">
                  <el-button size="mini" type="primary" plain @click="handleAdd"><i class="el-icon-download"></i> 导出数据</el-button>
              </el-form-item> -->
              <el-form-item style="float: right">
                <el-button
                  type="text"
                  v-if="selectionChangeData == ''"
                  disabled
                  style="color: #cdc5bf"
                  ><i class="el-icon-delete"></i>删除数据
                </el-button>
                <el-button type="text" v-else style="color: #ff0000" @click="delClick"
                  ><i class="el-icon-delete"></i>
                  删除数据
                </el-button>
              </el-form-item>
              <el-form-item style="float: right">
                <el-button type="text" style="color: #18bc9c" @click="AddData"
                  ><i class="el-icon-plus"></i>
                  新增监听对象
                </el-button>
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == '1'">
                <el-button
                  size="mini"
                  type="danger"
                  @click="forbiddenClick"
                  style="color: #ffffff"
                  ><i class="el-icon-video-pause"></i>
                  禁用
                </el-button>
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == '0'">
                <el-button
                  size="mini"
                  type="primary"
                  @click="forbiddenClick"
                  style="color: #ffffff"
                  ><i class="el-icon-video-play"></i>
                  启用
                </el-button>
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == ''">
                <el-button disabled size="mini" type="danger" style="color: #ffffff"
                  ><i class="el-icon-video-pause"></i>
                  禁用
                </el-button>
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == ''">
                <el-button disabled size="mini" type="primary" style="color: #ffffff"
                  ><i class="el-icon-video-play"></i>
                  启用
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div
            class="container-box"
            v-loading="loading"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-table
              :data="tabledatas"
              border
              stripe
              max-height="480px"
              @row-dblclick="rowdbclick"
              ref="talbes"
              :header-cell-style="{
                background: '#cfcfcf',
                color: '#000000',
                'text-align': 'center',
              }"
              :cell-style="{ 'text-align': 'center' }"
              style="width: 100%"
              size="small"
              @selection-change="selectionChange"
              @row-click="handleRowClick"
            >
              <el-table-column
                type="selection"
                header-align="center"
                width="60"
              ></el-table-column>
              <el-table-column prop="monitor_devices" label="监听设备对象">
              </el-table-column>
              <el-table-column prop="device_model" label="设备型号"> </el-table-column>
              <el-table-column prop="model_detail_param" label="型号参数">
              </el-table-column>
              <el-table-column prop="trigger_condition" label="条件规则">
                <template #default="scope">
                  <span v-if="scope.row.trigger_condition == 'lt'">小于</span>
                  <span v-if="scope.row.trigger_condition == 'gt'">大于</span>
                  <span v-if="scope.row.trigger_condition == 'eq'">等于</span>
                  <span v-if="scope.row.trigger_condition == 'lteq'">小于等于</span>
                  <span v-if="scope.row.trigger_condition == 'gteq'">大于等于</span>
                  <span v-if="scope.row.trigger_condition == 'between'"
                    >大于最小值，小于最大值</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="min_value" label="最小值" width="80">
              </el-table-column>
              <el-table-column prop="max_value" label="最大值" width="80">
              </el-table-column>
              <el-table-column prop="unit" label="单位" width="80">
                <!-- <template #default="scope">
                    <span v-if="scope.row.unit == '1'">kw</span>
                    <span v-if="scope.row.unit == '2'">m³</span>
                    <span v-if="scope.row.unit == '3'">KV</span>
                    <span v-if="scope.row.unit == '4'">A</span>
                </template> -->
              </el-table-column>
              <el-table-column prop="monitor_event_name" label="启用状态" width="120">
                <template #default="scope">
                  <span v-if="scope.row.is_start == '1'">启用</span>
                  <span v-if="scope.row.is_start == '0'">禁用</span>
                </template>
              </el-table-column>
              <el-table-column prop="monitor_event_name" label="触发事件名称">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click="editClick(scope.row)"
                    type="text"
                    icon="el-icon-edit"
                    style="color: #18bc9c; margin: 5px; padding: 0px"
                    >编辑
                  </el-button>
                  <!-- <el-button @click="delClick(scope.row)" type="text" icon="el-icon-delete"
                      style="color: #FF0000;margin:5px;padding:0px;">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>

            <div class="pagebox">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="param.pageNo"
                :page-sizes="[10, 30, 50, 100, 500]"
                :page-size="param.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
              >
              </el-pagination>
            </div>
          </div>
          <div>
            <el-dialog
              custom-class="way"
              v-if="dialogVisible"
              v-dialogDrag
              :title="dialogtitle"
              :visible.sync="dialogVisible"
              width="70%"
              top="30px"
              :class="dialogVisible == true ? 'action01' : 'action02'"
              :before-close="handleClose"
            >
              <div class="el-dialog-div">
                <el-form
                  :model="formData.datas[0]"
                  :inline="true"
                  :rules="rules"
                  ref="formdata"
                >
                  <el-form-item
                    label="监听设备对象"
                    :label-width="formLabelWidth"
                    prop="monitor_devices"
                  >
                    <el-input
                      v-model="formData.datas[0].monitor_devices"
                      autocomplete="off"
                      style="width: 562px"
                      placeholder="监听设备对象"
                    >
                      <i slot="suffix" class="el-icon-more" @click="deviceFrom"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备型号"
                    :label-width="formLabelWidth"
                    prop="device_model"
                  >
                    <el-input
                      style="width: 211px"
                      v-model="formData.datas[0].device_model"
                      autocomplete="off"
                      placeholder="设备型号"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="型号参数"
                    v-if="formData.datas[0].monitor_devices == ''"
                    :label-width="formLabelWidth"
                  >
                    <el-input
                      style="width: 211px"
                      disabled
                      v-model="formData.datas[0].model_detail_param"
                      autocomplete="off"
                      placeholder="型号参数"
                    >
                      <i slot="suffix" class="el-icon-more" @click="deviceFrom2"></i
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="型号参数"
                    v-else
                    :label-width="formLabelWidth"
                    prop="model_detail_param"
                  >
                    <el-input
                      style="width: 211px"
                      v-model="formData.datas[0].model_detail_param"
                      autocomplete="off"
                      placeholder="型号参数"
                    >
                      <i slot="suffix" class="el-icon-more" @click="deviceFrom2"></i
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="条件规则"
                    :label-width="formLabelWidth"
                    prop="trigger_condition"
                  >
                    <!-- <el-input v-model="formData.datas[0].trigger_condition" autocomplete="off"></el-input> -->
                    <el-select
                      v-model="formData.datas[0].trigger_condition"
                      placeholder="请选择条件规则"
                      style="width: 211px"
                    >
                      <el-option label="小于" value="lt"></el-option>
                      <el-option label="大于" value="gt"></el-option>
                      <el-option label="等于" value="eq"></el-option>
                      <el-option label="小于等于" value="lteq"></el-option>
                      <el-option label="大于等于" value="gteq"></el-option>
                      <el-option
                        label="大于最小值或小于最大值"
                        value="between"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    v-if="
                      formData.datas[0].trigger_condition == 'lt' ||
                      formData.datas[0].trigger_condition == 'eq' ||
                      formData.datas[0].trigger_condition == 'between' ||
                      formData.datas[0].trigger_condition == 'lteq'
                    "
                    label="最小值"
                    :label-width="formLabelWidth"
                    prop="min_value"
                    key="min_value"
                  >
                    <el-input
                      style="width: 211px"
                      v-model="formData.datas[0].min_value"
                      autocomplete="off"
                      placeholder="最小值"
                    ></el-input>
                  </el-form-item>
                  <el-form-item v-else label="最小值" :label-width="formLabelWidth">
                    <el-input
                      style="width: 211px"
                      :disabled="true"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    v-if="
                      formData.datas[0].trigger_condition == 'gt' ||
                      formData.datas[0].trigger_condition == 'between' ||
                      formData.datas[0].trigger_condition == 'gteq'
                    "
                    label="最大值"
                    :label-width="formLabelWidth"
                    prop="max_value"
                    key="max_value"
                  >
                    <el-input
                      style="width: 211px"
                      v-model="formData.datas[0].max_value"
                      autocomplete="off"
                      placeholder="最大值"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    v-else="
                      formData.datas[0].trigger_condition == 'lt' ||
                      formData.datas[0].trigger_condition == 'eq' ||
                      formData.datas[0].trigger_condition == ''
                    "
                    label="最大值"
                    :label-width="formLabelWidth"
                  >
                    <el-input
                      style="width: 211px"
                      :disabled="true"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="单位" :label-width="formLabelWidth" prop="unit">
                    <el-input
                      style="width: 211px"
                      v-model="formData.datas[0].unit"
                      autocomplete="off"
                      placeholder="单位"
                    ></el-input>
                    <!-- <el-select v-model="formData.datas[0].unit" placeholder="单位" style="width:215px;">
                        <el-option label="kw/h" value="1"></el-option>
                        <el-option label="m³" value="2"></el-option>
                        <el-option label="KV" value="3"></el-option>
                        <el-option label="A" value="4"></el-option>
                    </el-select> -->
                  </el-form-item>
                  <el-form-item
                    label="触发事件名称"
                    :label-width="formLabelWidth"
                    prop="monitor_event_name"
                  >
                    <el-input
                      style="width: 211px"
                      v-model="formData.datas[0].monitor_event_name"
                      autocomplete="off"
                      placeholder="触发事件名称"
                    >
                      <i slot="suffix" class="el-icon-more" @click="loadEvent"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="启用状态"
                    v-if="formData.datas[0].monitor_setting_id == ''"
                    :label-width="formLabelWidth"
                    prop="is_start"
                  >
                    <!-- <el-input v-model="formData.datas[0].is_start" autocomplete="off"></el-input> -->
                    <el-switch
                      v-model="formData.datas[0].is_start"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-value="0"
                      inactive-value="1"
                    >
                    </el-switch>
                  </el-form-item>
                  <el-form-item
                    label="启用状态"
                    v-if="formData.datas[0].monitor_setting_id != ''"
                    :label-width="formLabelWidth"
                  >
                    <!-- <el-input v-model="formData.datas[0].is_start" autocomplete="off"></el-input> -->
                    <el-switch
                      v-model="formData.datas[0].is_start"
                      disabled
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-value="1"
                      inactive-value="0"
                    >
                    </el-switch>
                  </el-form-item>
                </el-form>
                <div>
                  <el-table
                    :data="tabledatas2"
                    border
                    stripe
                    :header-cell-style="{
                      background: '#cfcfcf',
                      color: '#000000',
                      'text-align': 'center',
                    }"
                    :cell-style="{ 'text-align': 'center' }"
                    style="width: 100%"
                    size="small"
                  >
                    <el-table-column prop="group_name" label="所属设备组">
                    </el-table-column>
                    <el-table-column prop="device_name" label="设备名称">
                    </el-table-column>
                    <el-table-column prop="device_code" label="设备编号">
                    </el-table-column>
                    <el-table-column prop="device_model" label="设备型号">
                    </el-table-column>
                    <el-table-column prop="model_detail_param" label="型号参数">
                    </el-table-column>
                    <el-table-column prop="bom_name" label="设备机型"> </el-table-column>
                  </el-table>
                </div>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
              </span>
            </el-dialog>
          </div>
          <div>
            <el-dialog
              v-if="dialogDevice"
              v-dialogDrag
              title="设备组成员"
              :visible.sync="dialogDevice"
              width="70%"
              top="30px"
              :class="dialogDevice == true ? 'action01' : 'action02'"
            >
              <div class="el-dialog-div">
                <decvicegroupfrom @getName="decviceClick"></decvicegroupfrom>
              </div>
              <span slot="footer" class="dialog-footer" style="margin-top: -50px">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="bindfrom1">确 定</el-button>
              </span>
            </el-dialog>
          </div>
          <div>
            <el-dialog
              v-if="dialogDevice2"
              v-dialogDrag
              title="机型参数"
              :visible.sync="dialogDevice2"
              width="70%"
              top="30px"
              :class="dialogDevice2 == true ? 'action01' : 'action02'"
            >
              <div class="el-dialog-div">
                <device_model_param @getcomData="decviceClick2" :getmodelName="bom_id">
                </device_model_param>
              </div>
              <span slot="footer" class="dialog-footer" style="margin-top: -50px">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="bindfrom2">确 定</el-button>
              </span>
            </el-dialog>
          </div>
          <div>
            <el-dialog
              v-if="dialogEvent"
              v-dialogDrag
              title="事件名称"
              :visible.sync="dialogEvent"
              width="70%"
              :class="dialogEvent == true ? 'action01' : 'action02'"
            >
              <div class="el-dialog-div">
                <Monitorevent @getName="EventClick"></Monitorevent>
              </div>
              <span slot="footer" class="dialog-footer" style="margin-top: -50px">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="bindEvent">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getDateTimes, numFormat, getDateWeek } from "@/utils/index.js";
import decvicegroupfrom from "@/views/message/components/decvicegroupfrom.vue";
import decvicegroupfrom2 from "@/views/message/components/decvicegroupfrom2.vue";
import device_model_param from "@/views/message/components/device_model_param.vue";
import Monitorevent from "@/views/message/components/Monitorevent.vue";
import { getlist, getgridsave, getdeletes } from "@/api/message/list";
import moment from "moment";

export default {
  name: "Monitorsetting",
  components: {
    decvicegroupfrom,
    Monitorevent,
    decvicegroupfrom2,
    device_model_param,
  },
  data() {
    return {
      loading: false,
      selectionChangeData: [],
      loadingdata1: false,
      isloading: false,
      param: {
        funId: "msg_monitor_setting",
        baseSQL: "",
        warnStatus: "",
        name: "",
        offset: 0,
        pageNo: 1,
        limit: 10,
      },
      dataTotal: 0,
      tabledatas: [],
      dialogVisible: false,
      dialogDevice: false,
      dialogDevice2: false,
      dialogEvent: false,
      dialogtitle: "",
      tabledatas2: [],
      formData: {
        funId: "msg_monitor_setting",
        is_iot: false,
        // sys: '192.168.112.15',
        datas: [
          {
            monitor_devices: "", //监听设备对象
            device_model: "", //设备型号
            model_detail_param: "", //型号参数
            trigger_condition: "", //条件规则
            min_value: "", //最小值
            max_value: "", //最大值
            unit: "", //单位
            monitor_event_id: "", //触发事件id
            monitor_event_name: "", //触发事件名称
            is_start: 0, //启用状态
            device_ids: "", //设备id
          },
        ],
      },
      formLabelWidth: "130px",
      rules: {
        monitor_devices: [
          { required: true, message: "监听设备对象必填", trigger: "blur" },
        ],
        device_model: [{ required: true, message: "设备型号必填", trigger: "blur" }],
        // model_detail_param: [
        //     { required: true, message: '型号参数必填', trigger: 'blur' },
        // ],
        trigger_condition: [{ required: true, message: "条件规则必填", trigger: "blur" }],
        min_value: [{ required: true, message: "最小值必填", trigger: "blur" }],
        max_value: [{ required: true, message: "最大值必填", trigger: "blur" }],
        // unit: [
        //     { required: true, message: '单位必填', trigger: 'blur' },
        // ],
        monitor_event_name: [
          { required: true, message: "触发事件名称", trigger: "blur" },
        ],
        // is_start: [
        //     { required: true, message: '启用状态必填', trigger: 'blur' },
        // ],
      },
      max: "10",
      eventData: {
        funId: "msg_event_records",
        is_iot: false,
        datas: [
          {
            active_time: "", //触发时间
            is_turn_to_alarm: "", //是否告警;是的话，才有告警的子表数据
            event_description: "", //事件描述
            event_name: "", //事件名称
            is_inform: "", //是否通知;是的话，才有事件通知的子表数据
            is_to_control: "", //是否联动设备控制;是的话，才有联动设备控制详情的子表数据
          },
        ],
      },
      statusData: "",
      tabledatas3: "",
      bom_id: "",
      Eventform: [],
    };
  },
  mounted() {
    //
    this.getDatas();
    // this.records()
  },
  created() {
    this.isloading = false;
  },
  methods: {
    //判断表单是否变化
    handleClose() {
      let num = 0;
      for (const key in this.formData.datas[0]) {
        if (this.formData.datas[0][key] == "") {
          num += 0;
        } else if (this.formData.datas[0][key] == null) {
          num += 0;
        } else {
          num += 1;
        }
      }
      if (this.dialogtitle == "新增监听对象") {
        if (num != 1) {
          this.$confirm("表单未保存,是否关闭?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.dialogVisible = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消关闭",
              });
            });
        } else {
          this.dialogVisible = false;
        }
      } else {
        // console.log('222',JSON.stringify(this.formData.datas[0]))
        // console.log('22222',sessionStorage.getItem("initForm"))
        if (
          JSON.stringify(this.formData.datas[0]) == sessionStorage.getItem("initForm")
        ) {
          this.dialogVisible = false;
        } else {
          this.$confirm("表单未保存,是否关闭?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.dialogVisible = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消关闭",
              });
            });
        }
      }
      // console.log('num',num)
    },
    //设备对象弹出框
    deviceFrom() {
      this.dialogDevice = true;
      this.tabledatas2 = [];
      this.formData.datas[0].model_detail_param = "";
    },
    //设备组成员弹出框
    deviceFrom2() {
      this.dialogDevice2 = true;
      this.tabledatas3 = "";
    },
    //事件名称弹框
    loadEvent() {
      this.dialogEvent = true;
    },
    handleAdd() {},
    //判断最大值，最小值
    records(e) {
      // console.log('this.formData.datas[0].max_value', e)
      let ids = "";
      e.forEach((item, index) => {
        if (this.max > item.max_value && item.max_value != null) {
          if (index != 0) {
            ids += item.monitor_event_id + ";";
          }
        }
      });
      // console.log(ids)
    },

    //获取设备组设备对象
    decviceClick(e) {
      this.tabledatas2 = e;
      if (e.length != "0") {
        this.bom_id = e[0].bom_id;
      }
      // console.log('eeee',e)
    },
    //获取设备参数
    decviceClick2(e) {
      this.tabledatas3 = e;
    },
    bindfrom1() {
      if (this.tabledatas2.length == "0") {
        this.$message({
          message: "请选择一条数据",
          type: "error",
        });
      } else {
        this.formData.datas[0].monitor_devices = "";
        this.tabledatas2.forEach((item, index) => {
          // console.log(3333, item)
          if (index !== 0) {
            this.formData.datas[0].monitor_devices += ";";
            this.formData.datas[0].device_ids += ";";
            // console.log(333)
          }
          this.formData.datas[0].monitor_devices += item.device_name;
          // console.log(33333, this.formData.datas[0])
          this.formData.datas[0].device_ids += item.device_id;
        });
        this.formData.datas[0].device_model = this.tabledatas2[0].device_model;
        // this.$refs['formdata'].validate((valid) => {})
        console.log(
          "this.formData.datas[0].device_ids",
          this.formData.datas[0].device_ids
        );
        this.dialogDevice = false;
      }
    },
    bindfrom2() {
      if (this.tabledatas3.length == "0") {
        this.$message({
          message: "请选择一条数据",
          type: "error",
        });
      } else {
        this.formData.datas[0].model_detail_param = this.tabledatas3[0].param_value;
        this.formData.datas[0].unit = this.tabledatas3[0].unit;
        this.dialogDevice2 = false;
        // this.$refs['formdata'].validate((valid) => {})
      }
    },
    //获取事件名称
    EventClick(e) {
      // if (this.$refs['formdata']) {
      //     this.$refs['formdata'].resetFields();
      // }
      // console.log('e',e)
      this.Eventform = e;
    },
    bindEvent() {
      // console.log('this.Eventform', this.Eventform)
      if (this.Eventform.length == "0") {
        this.$message({
          message: "请选择一条数据",
          type: "error",
        });
      } else {
        this.formData.datas[0].monitor_event_id = this.Eventform[0].event_id; //触发事件id
        this.formData.datas[0].monitor_event_name = this.Eventform[0].event_name; //触发事件名称
        this.dialogEvent = false;
        this.eventData.datas[0].is_turn_to_alarm = this.Eventform[0].is_turn_to_alarm; //是否告警;是的话，才有告警的子表数据
        this.eventData.datas[0].event_description = this.Eventform[0].event_description; //事件描述
        this.eventData.datas[0].event_name = this.Eventform[0].event_name; //事件名称
        this.eventData.datas[0].is_inform = this.Eventform[0].is_inform; //是否通知;是的话，才有事件通知的子表数据
        this.eventData.datas[0].is_to_control = this.Eventform[0].is_to_control; //是否联动设备控制;是的话，才有联动设备控制详情的子表数据
        this.$refs["formdata"].validate((valid) => {});
      }
    },
    // 数据搜索按钮
    onSearch() {
      this.param.pageNo = 1;
      this.getDatas();
    },
    //添加按钮
    AddData() {
      if (this.$refs["formdata"]) {
        this.$refs["formdata"].resetFields();
      }
      this.dialogtitle = "新增监听对象";
      this.dialogVisible = true;
      this.formData.datas[0].monitor_setting_id = "";
      this.formData.datas[0].monitor_devices = "";
      this.formData.datas[0].device_model = "";
      this.formData.datas[0].model_detail_param = "";
      this.formData.datas[0].trigger_condition = "";
      this.formData.datas[0].min_value = "";
      this.formData.datas[0].max_value = "";
      this.formData.datas[0].unit = "";
      this.formData.datas[0].monitor_event_name = "";
      this.formData.datas[0].is_start = "0";
      this.formData.datas[0].monitor_event_id = "";
      this.formData.datas[0].device_ids = "";
      this.tabledatas2 = [];
    },
    //编辑按钮
    editClick(e) {
      this.getDatas();
      console.log(this.formData.datas[0]);
      let key = "device_ids";
      let value = "";
      e[key] = value;
      console.log("33333eeee", e);
      this.formData.datas[0] = e;

      console.log("e", e);
      sessionStorage.setItem("initForm", JSON.stringify(this.formData.datas[0]));
      // console.log('JSON.stringify(this.formData.datas[0])',JSON.stringify(this.formData.datas[0]))
      if (this.$refs["formdata"]) {
        this.$refs["formdata"].resetFields();
      }
      this.dialogtitle = "编辑监听对象";
      this.dialogVisible = true;
      this.tabledatas2 = [];
    },
    //双击打开编辑页面
    rowdbclick(row) {
      this.getDatas();
      this.formData.datas[0] = row;
      if (this.$refs["formdata"]) {
        this.$refs["formdata"].resetFields();
      }
      this.dialogtitle = "编辑监听对象";
      this.dialogVisible = true;
      sessionStorage.setItem("initForm", JSON.stringify(this.formData.datas[0]));
    },
    //保存按钮
    save() {
      this.$refs["formdata"].validate((valid) => {
        if (valid) {
          console.log("valid", valid);
          if (this.formData.datas[0].monitor_setting_id) {
            this.updatesetting();
            this.dialogVisible = false;
          } else {
            this.addsetting();
            this.dialogVisible = false;
          }
        }
      });
    },
    //修改数据
    updatesetting() {
      // min_value: '',//最小值
      //         max_value: '',//最大值
      if (
        this.formData.datas[0].trigger_condition == "0" ||
        this.formData.datas[0].trigger_condition == "2"
      ) {
        this.formData.datas[0].max_value = "";
      } else if (this.formData.datas[0].trigger_condition == "1") {
        this.formData.datas[0].min_value = "";
      }
      getgridsave(this.formData).then((res) => {
        if (res.data.code == "200") {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getDatas();
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
    //添加数据
    addsetting() {
      getgridsave(this.formData).then((res) => {
        if (res.data.code == "200") {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getDatas();
          // this.formData.datas[0]=''
        } else {
          this.$message({
            message: "添加失败",
            type: "error",
          });
        }
      });
    },
    //删除数据
    delClick() {
      var tablefromdata = {
        funId: "msg_monitor_setting",
        ids: "",
      };
      this.selectionChangeData.forEach((item) => {
        tablefromdata.ids += item.monitor_setting_id + ";";
      });
      this.$confirm(`已选择${this.selectionChangeData.length}条数据, 是否删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        getdeletes(tablefromdata).then((res) => {
          if (res.data.code == "200") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getDatas();
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
        });
      });
    },
    getDatas(e) {
      if (this.param.name == "") {
        this.param.baseSQL = "";
      } else {
        this.param.baseSQL = 'monitor_devices like"%' + this.param.name + '%"';
      }
      getlist(this.param).then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          this.tabledatas = resdata.rows;
          this.dataTotal = resdata.total;
        }
        this.records(this.tabledatas);
      });
    },
    //禁用启用按钮
    forbiddenClick() {
      // this.loading = true
      let fromData = {
        funId: "msg_monitor_setting",
        is_iot: false,
        datas: [{}],
      };
      let statusName = "";
      fromData.datas = this.selectionChangeData;
      // if (this.statusData == '0') {
      //     for (let i = 0; i < fromData.datas.length; i++) {
      //         fromData.datas[i].is_start = '1'
      //     }
      //     statusName = '禁用'
      // }
      // if (this.statusData == '1') {
      //     for (let i = 0; i < fromData.datas.length; i++) {
      //         fromData.datas[i].is_start = '0'
      //     }
      //     statusName = '启用'
      // }

      for (let i = 0; i < fromData.datas.length; i++) {
        if (fromData.datas[i].is_start != this.statusData) {
          this.$message({
            message: "只能选择相同状态记录，进行启用/禁用",
            type: "error",
          });
          this.getDatas();
          this.toggleSelection(fromData.datas);
          return false;
        } else if (this.statusData == "0") {
          fromData.datas[i].is_start = "1";
          statusName = "启用";
        } else if (this.statusData == "1") {
          fromData.datas[i].is_start = "0";
          statusName = "禁用";
        }
      }
      this.$confirm(
        `当前选择了${this.selectionChangeData.length}条数据, 是否${statusName}?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // for (let i = 0; i < fromData.datas.length; i++) {
          //     if (fromData.datas[i].is_start != this.statusData) {
          //         this.$message({
          //             message: '只能选择相同状态记录，进行启用/禁用',
          //             type: 'error'
          //         });
          //         this.getDatas()
          //         this.toggleSelection(fromData.datas)
          //         return false;
          //     } else if (this.statusData == '0') {
          //         fromData.datas[i].is_start = '1'
          //     }else if (this.statusData == '1') {
          //         fromData.datas[i].is_start = '0'
          //     }
          // }
          getgridsave(fromData).then((res) => {
            console.log(999, fromData);
            if (res.data.code == "200") {
              this.$message({
                message: "修改启用状态成功",
                type: "success",
              });
              this.loading = false;
              this.getDatas();
              // this.toggleSelection(e)
            } else {
              this.$message({
                message: "修改启用状态失败",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: `已取消${statusName}`,
          });
          this.getDatas();
          this.loading = false;
        });
    },
    // 复选框按钮
    selectionChange(e) {
      if (e.length == 0) {
        this.statusData = "";
        this.selectionChangeData = "";
      } else {
        this.statusData = e[0].is_start;
        this.selectionChangeData = e;
      }
    },
    handleRowClick(e) {
      this.$refs.talbes.toggleRowSelection(e);
      const _selectData = this.$refs.talbes.selection;
      this.selectionChange(_selectData);
    },
    //清空复选框
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.talbes.toggleRowSelection(row);
        });
        this.selectionChangeData = "";
      } else {
        this.$refs.talbes.clearSelection();
      }
    },
    indexMethod(index) {
      return (this.param.pageNo - 1) * this.param.limit + index + 1;
    },
    sizeChange(val) {
      this.param.limit = val;
      this.getDatas();
    },
    currentChange(val) {
      this.param.pageNo = val;
      this.param.offset = (val - 1) * this.param.limit;
      this.getDatas();
    },
    dateFormat(row, column, cellValue, index) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>
<style>
.el-select-dropdown {
  min-width: 200px !important;
}

.kanbao-bigbox .el-loading-spinner .el-loading-text {
  color: #666 !important;
}

.el-dialog__title {
  font-size: 18px;
  color: #303133;
  height: 0px;
  display: flex;
}
</style>
<style scoped>
.dialog-footer1 {
  margin-top: -50px;
  /* padding:10px 20px 20px; */
  /* text-align:right; */
  /* box-sizing:border-box; */
}

.action01 {
  animation: zoomIn 0.5s;
  animation-iteration-count: 1;
}

.action02 {
  animation: zoomOut 0.5s;
  animation-iteration-count: 1;
}

.el-dialog__title {
  font-size: 18px;
  color: #303133;
  height: 0px;
  display: flex;
}

.el-main {
  padding: 0px !important;
}

.kanbao-bigbox {
  margin-top: 0px;
}
</style>
<style scoped>
.righttop-search-box {
  background: #f8f8f8;
  padding: 8px 20px 7px 20px;
  border-bottom: 1px solid #ececec;
  position: fixed;
  top: 0;
  width: calc(100% - 55px);
  z-index: 4;
}

.righttop-search-box .el-form-item {
  margin-bottom: 0px !important;
}

.container-box {
  padding: 10px;
  margin: 50px 0;
}

.pagebox {
  text-align: right;
  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: #ececec;
  z-index: 4;
}
</style>
